<template>
  <div class="box">
    <div class="color">123</div>
    <div class="color1">123</div>
    <h3>{{ msg }}</h3>
    <h4>{{ obj.nmae }}</h4>
    <h5>{{ age > 18 ? '太老' : '年轻' }}</h5>
    <a :href="url">百度一下,你就知道</a>
    <input type="text" :value="msg" />
    <input type="checkbox" :checked="flag" />
    <img :src="imgUrl" alt="" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: true,
      url: 'https://baidu.com',
      age: 19,
      msg: '我是黑马',
      obj: {
        name: '我是传智交友',
      },
      imgUrl:
        'https://ts3.cn.mm.bing.net/th?id=OIP-C.ZcjidB6ytMyNAjg9clT4PAHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2',
    }
  },
}
</script>
<style lang="less">
.box {
  .color {
    color: red;
  }
  .color1 {
    color: blue;
  }
}
</style>
